<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>订单管理-商品评价</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
  <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
  <script src="asserts/js/jquery-2.1.1.min.js"></script>
  <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
  <div id="app">
    <nav class=" navbar-inverse navbar-fixed-top">
      <div class="container-fluid" >
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class=""><a href="./userIndex4.html" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
            <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
            <li><a href="./store/index.html" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"  style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">数码电子</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">生活用品</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">服装 | 男装 | 女装</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">厨具用品</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" v-if="user == null" @click="loginVisible = true"  class="a2" data-toggle="modal" data-target="#exampleModal" style="padding-top: 7px;">亲，请登录</a>
              <a href="#" v-else @click="toInfo"  class="a2" data-toggle="modal" style="padding-top: 7px;" data-target="#exampleModal">欢迎您，{{user.username}}</a>
            </li>
            <li>
              <a v-if="user == null" href="./register.html" style="padding-top: 7px;margin-top: 0px;">注册</a>
              <a v-else @click="logout" style="padding-top: 7px;margin-top: 0px;cursor: pointer">注销</a>
            </li>
            <li><a href="#" @click="cartBtn" class="gouwu"  data-toggle="modal" data-target="#exampleModal" id="a3" style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车(<span id="nums" style="color: #eb9e9b">{{cartNumber}}</span>)</a>
            </li>
            <li><a id="time" data-toggle="modal" data-target="#exampleModal"></a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div style="width: 60%;height: 100%;margin: 0 auto;margin-top: 100px;margin-bottom: 100px">
      <div v-for="(item,index) in productList">
        <div style="height: 100px;">
          <h2>商品评价</h2>
          <div>
            <div style="float: left">
              <span>订单号：{{item.orderNumber}}</span>
            </div>
            <div style="float: left;margin-left: 50px">
              <span>下单时间：{{item.createTime}}</span>
            </div>
          </div>
        </div>
        <div style="height: 500px">
          <!-- 放商品图片 -->
          <div style="float: left;width: 30%;height: 500px">
            <div class="block">
              <el-image :src="item.url"></el-image>
              <span>{{item.name}}</span>
            </div>
          </div>
          <!-- 存放商品评分、评价等内容 -->
          <div style="height: 500px;float: left;width: 70%;">
            <el-form label-width="80px">
              <el-form-item label="评分">
                <el-rate
                        style="line-height: 2"
                        v-model="value"
                        show-text>
                </el-rate>
              </el-form-item>
              <el-form-item label="评价">
                <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="说说你的使用感受或购物心得"
                        v-model="productComments[index].commentContext"
                        >
                </el-input>
              </el-form-item>
              <el-form-item label="晒图">
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div style="margin-left: 50%">
        <el-button type="primary" @click="addComments">提交评价</el-button>
      </div>
    </div>
  </div>

  <script type="text/javascript">
      new Vue({
          el: '#app',
          data: {
              cartNumber: 0,
              value: 0,
              dialogImageUrl: '',
              dialogVisible: false,
              src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
              productList: [],
              productComments: []
          },
          methods: {
              addComments() {
                 let self = this;
                  console.log(JSON.stringify(this.productComments))
                $.ajax({
                    url: '/taobei_web/comment/addComments',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        comments: JSON.stringify(self.productComments)
                    },
                    success(data) {
                        if (data.status == 200){
                            location.href = "./info4.html"
                        }
                    }
                })
              },
              initProductList() {
                  let self = this;
                //初始化展示待评价的商品
                $.ajax({
                    url: '/taobei_web/order/getProductDetails',
                    type: 'get',
                    dataType: 'json',
                    success(data) {
                        if (data.status == 200){
                            self.productList = data.data
                            for (let i = 0;i<data.data.length;i++){
                                self.productComments.push({
                                    id: data.data[i].id,
                                    uid: data.data[i].uid,
                                    pid: data.data[i].pid,
                                    commentContext: ''
                                })
                            }
                        }
                    }
                })
              },
              handleRemove(file, fileList) {
                  console.log(file, fileList);
              },
              handlePictureCardPreview(file) {
                  this.dialogImageUrl = file.url;
                  this.dialogVisible = true;
              },
              cartBtn() {
                  //先判断是否已经登录，如果没登录，显示弹框让用户登录
                  if (JSON.parse(window.sessionStorage.getItem("user")) == null){
                      //未登录
                      this.loginVisible =  true;
                  }else{
                      //登录了就跳转到购物车页面
                      location.href = "./cart.html"
                  }
              },
              initCartNumber() {
                  let self = this;
                  $.ajax({
                      url:"/taobei_web/cart/getCartSum",
                      type:"get",
                      dataType:"json",
                      success:function (data) {
                          if (data.status == 200) {
                              self.cartNumber = data.data.nums
                          }
                      }
                  })
              },
              logout() {
                  //清除本地存储的用户信息
                  window.sessionStorage.removeItem("user")
                  //重新初始化购物车商品数量
                  this.cartNumber = 0
                  //发请求让服务器清除session中保存的用户信息
                  $.ajax({
                      url: '/taobei_web/user/logout',
                      type: 'get',
                      dataType: 'json',
                      success(data) {
                          if (data.status == 200){
                              //重新刷新首页
                              location.reload()
                          }
                      }
                  })
              },
              toInfo() {
                  //跳转到个人中心页面
                  location.href = './info4.html'
              },
          },
          computed: {
            user() {
                return JSON.parse(window.sessionStorage.getItem("user"))
            }
          },
          mounted() {
            //初始化购物车商品数量
              this.initCartNumber();
              //初始化评价商品
              this.initProductList();
          }
      })
  </script>
</body>
</html>